<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>
	<view class="myTeam-content w100">
		<view class="tab-box w100">
			<up-tabs :activeStyle="{
					'fontWeight': 'bold',
					'fontSize': '30rpx',
					'color': 'rgba(255,255,255,0.87)'
				}" lineColor="linear-gradient( 270deg, #7EDE9E 0%, #66DEC2 47%, #5CCCC0 100%)" :inactiveStyle="{
				 	'fontWeight': 500,
				 	'fontSize': '30rpx',
				 	'color': 'rgba(255,255,255,0.6)'
				 }" :current="tabIndex" @change="changeTab" :list="tabList"></up-tabs>
		</view>
		<view class="team-main w100">
			<swiper class="swiper-content" @change="changeSwiper" :current="tabIndex">
				<!-- ============全部========= -->
				<swiper-item class="swiper-content-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<template v-if="itemLoading">
							<view v-for="num in 4" :key="num" style="margin-bottom: 16rpx;">
								<uv-skeletons loading :skeleton="skeleton"></uv-skeletons>
							</view>
						</template>
						<template v-else>
							<template>
								<myTeamItemVue @writeOffOpen="writeOffOpen"></myTeamItemVue>
								<myTeamItemVue @writeOffOpen="writeOffOpen"></myTeamItemVue>
								<myTeamItemVue></myTeamItemVue>
								<view class="view-more">
									<up-loadmore :status="status" />
								</view>
							</template>
							<view class="not-list-view">
								<up-empty mode="data" text="暂无组队数据~">
								</up-empty>
							</view>
						</template>
					</scroll-view>
				</swiper-item>
				<!-- ============待支付========= -->
				<swiper-item class="swiper-content-item">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<template v-if="itemLoading">
							<view v-for="num in 4" :key="num" style="margin-bottom: 16rpx;">
								<uv-skeletons loading :skeleton="skeleton"></uv-skeletons>
							</view>
						</template>
						<template v-else>
							<template>
								<myTeamItemVue @writeOffOpen="writeOffOpen"></myTeamItemVue>
								<myTeamItemVue @writeOffOpen="writeOffOpen"></myTeamItemVue>
								<myTeamItemVue></myTeamItemVue>
								<view class="view-more">
									<up-loadmore :status="status" />
								</view>
							</template>
							<view class="not-list-view">
								<up-empty mode="data" text="暂无组队数据~">
								</up-empty>
							</view>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>

		</view>
	</view>

	<up-popup :show="writeOffShow" bgColor="#222528" round="18rpx" mode="center" @close="closewriteOff">
		<view class="writeOff-box flex-row-center">
			<view class="code-box flex-center">
				<view class="code-content">
					<up-qrcode :size="200" :val="codeText" icon="https://cdn.uviewui.com/uview/album/1.jpg"></up-qrcode>
				</view>
				<text class="text">核销码：QZRYJNMG</text>
			</view>
			<view class="bnt-box flex-center" @click="closewriteOff">
				<text class="btn-text">确定</text>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import myTeamItemVue from '../components/myTeamItem.vue';
	const writeOffShow = ref(false);
	const status = ref('loading');
	const codeText = ref(null);
	const itemLoading = ref(true);
	const tabIndex = ref(0);
	const tabList = [{
			name: '全部'
		},
		{
			name: '待支付'
		},
		{
			name: '组队中'
		},
		{
			name: '已结束'
		},
	]
	const skeleton = [{
			type: 'flex',
			num: 1,
			style: 'alignItems: center',
			children: [{
				type: 'custom',
				num: 1,
				style: 'width:68rpx;height:68rpx;marginRight: 16rpx;borderRadius:50%;'
			}, {
				type: 'line',
				num: 1,
				style: 'width:100%;',
			}]
		},
		{
			type: 'flex',
			num: 1,
			style: 'marginTop:24rpx;marginBottom:24rpx;display:flex;',
			children: [{
					type: 'custom',
					num: 1,
					style: 'width:160rpx;height:160rpx;borderRadius:16rpx;marginRight: 32rpx;'
				},
				{
					type: 'line',
					num: 3,
					gap: '20rpx'
				},

			]
		}, {
			type: 'line',
			num: 1,
			gap: '20rpx'
		}
	]
	onLoad(() => {
		setTimeout(() => {
			itemLoading.value = false;
		}, 1000)
	});
	const changeTab = (e) => {
		tabIndex.value = e.index;
	}
	const changeSwiper = (e) => {
		tabIndex.value = e.detail.current;
		if (e.detail.current == 2) { //评论
			uni.showLoading({
				title: '加载中'
			});
		}
	}
	const writeOffOpen = (value) => { //打开核销
		writeOffShow.value = true;
		codeText.value = value;
	}
	const closewriteOff = (value) => {
		writeOffShow.value = false;

	}
</script>
<style>
	.u-safe-bottom {
		padding: 0;
	}

	/deep/ .u-tabs__wrapper__nav {
		justify-content: space-between;
	}

	/deep/ .u-tabs__wrapper__nav__line {
		left: 0;
	}

	/deep/ .u-tabs__wrapper__nav__item {
		flex: 1;
	}
</style>
<style lang="scss" scoped>
	.myTeam-content {
		display: flex;
		flex-direction: column;
		padding: 24rpx 20rpx;
		height: 100vh;

		.tab-box {
			padding-bottom: 20rpx;
		}
	}

	.team-main {
		flex: 1;
		flex-grow: 1;

		.swiper-content {
			height: 100%;

			.swiper-content-item {
				height: 100%;
			}
		}
	}

	.writeOff-box {
		padding: 32rpx 0;
		width: 520rpx;
		// min-height: 600rpx;
		border-radius: 18rpx;
		flex-direction: column;

		.code-box {
			flex-direction: column;

			.code-content {
				padding: 18rpx;
				border-radius: 12rpx;
				background-color: #FFFFFF;
			}
		}

		.text {
			font-weight: bold;
			font-size: 38rpx;
			color: #C8C9C9;
			margin-top: 48rpx;
		}

		.bnt-box {
			width: 80%;
			height: 72rpx;
			background: $btn-bg-color;
			border-radius: 36rpx;
			margin-top: 36rpx;

			.btn-text {
				font-size: 28rpx;
				font-weight: bold;
				color: $btn-text-color;
			}
		}

	}
</style>